/*
 * @Author: lusx 
 * @Date: 2020-05-18 17:28:01 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-21 11:41:25
 */
import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, Link } from 'react-router-dom';
import { ListPage } from 'weaver-mobile-page';
import { Icon } from 'weaver-mobile';
import classnames from 'classnames';
const Normal = ListPage.Normal;
const preFixCls = 'gv-new-task-list';
const template = {
    default: {
        theme: 'col1_row2',
        dataKeys: ['title'],
    },
};
@inject('addStore')
@withRouter
@observer
export default class NewTaskList extends React.Component {
    componentDidMount() {
        const { data, list } = this.props.addStore;
        list.setState({ data:this.props.addStore.data });
    }
    componentWillUpdate() {
        const { data, list } = this.props.addStore;
        list.setState({ data:this.props.addStore.data });
    }
    render() {
        const { list } = this.props.addStore;
        return (
            <div className={preFixCls} id={this.props.addStore.count}>
                <Normal
                    template={template}
                    store={list}
                    getTemplate={this.getTemplate}
                />
            </div>
        )
    }
    getTemplate = (template) => {
        const { url, addStore: { canSubmit, count, currentIndexFun } } = this.props;
        const newTemp = {
            ...template,
            default: [{
                key: 'col_1',
                render: (data) => {
                    const { title, id } = data;
                    const jiaCls = classnames('gv_jiabox', { [`${preFixCls}-icon-disable`]: false });
                    const jianCls = classnames('', { [`${preFixCls}-icon-disable`]: false });
                    const index = id.split('_')[1];
                    // const linkTo = id === 'id_0' ? `${url}/task` : `${url}/add-task/${index}`;
                    const linkTo =  `${url}/add-task/${index}`;
                    return index == -999?(
                        <div key={id} id={index.toString()} className={`${preFixCls}-container`}>
                           <span className={jiaCls}  onClick={this.jiaFun}><Icon type="tianjia" size="lg" color="rgb(85, 177, 249)" style={{    marginTop: '7px',marginLeft: '155px'}} /></span>
                        </div>
                    ):(
                        <div key={id} id={index.toString()} className={`${preFixCls}-container`}>
                            <Link to={linkTo} onClick={()=>{currentIndexFun({currentIndex:index})}}  >
                                <span className={`${preFixCls}-main`}>{title}</span>
                            </Link>
                            <span className={`${preFixCls}-icon-box`}>
                                <span className={jiaCls} onClick={this.jiaFun}><Icon type="tianjia" color="#057efb" /></span>
                                <span className={jianCls} onClick={()=>{this.jianFun({index})}}><Icon type="shanchu" color="#f96268" /></span>
                            </span>
                        </div>
                    )
                },
            }],
        };
        return newTemp;
    }
    jiaFun = () => {
        if(document.getElementsByClassName('gv_jiabox')[0].className.includes('gv-new-task-list-icon-disable')){
            return false;
        }else{
            this.props.addStore.setCount({ type: 'add' });
        }
    }
    jianFun = (params) => {
        this.props.addStore.setCount(params);
    }
}